#include ("/_includes/_layout.html")
#@layout("商品详情", "wxmall,点步科技", "Wxmall社区","wxmall")
#define css()
<link rel="stylesheet" href="#(webctx)/resources/css/product-detail.css"/>
<style>
.weui-media-box__info{
	margin-top : 0px !important;
}
</style>
#end
#define content()
<div class="weui-content">
  <!--产品详情-->
  <div class="weui-tab">
    <div class="weui-navbar" style="position:fixed; top:0; left:0; right:0; height:44px;">
      <a class="weui-navbar__item proinfo-tab-tit weui-bar__item--on" href="#tab1">商品详情</a>
      <a class="weui-navbar__item proinfo-tab-tit" href="#tab2">商品评价</a>
    </div>
    <div class="weui-tab__bd proinfo-tab-con">
      <div id="tab1" class="weui-tab__bd-item weui-tab__bd-item--active">
        <!--主图轮播-->
        <div class="swiper-container swiper-zhutu">
          <div class="swiper-wrapper">
            <!-- <div class="swiper-slide"><img src="upload/zhutu01.jpg" /></div> -->
            #for(image : productDetail.imageList)
				<div class="swiper-slide"><img src="#(image)" height="300px"></div>
			#end
          </div>
          <div class="swiper-pagination swiper-zhutu-pagination"></div>
        </div>
        <div class="wy-media-box-nomg weui-media-box_text">
          <h4 class="wy-media-box__title" style="font-size: 18px">#(productDetail.product.name)</h4>
          #if(productDetail.promotionInfo??)
          	<div class="wy-pro-pri mg-tb-5">¥<em class="num font-20">#(productDetail.promotionInfo.promotionPrice)</em> <s>￥#(productDetail.product.price)</s></div>
          #else
            <div class="wy-pro-pri mg-tb-5">¥<em class="num font-20">#(productDetail.product.price)</em></div>
          #end
          #if(productDetail.promotionInfo??)
            <div class="weui-media-box__info">
            	<span class="weui-media-box__desc"><font style="font-weight:bold;font-size: 14px;color: red;">#(productDetail.promotionInfo.promotionTag) #(productDetail.promotionInfo.promotionInfo)</font>&nbsp;&nbsp;#(productDetail.promotionInfo.promotionTime)</span>
            </div>
          #end
          <!-- 商品订单返现 -->
			#if(productDetail.cashback??)
			<div class="weui-media-box__info">
	           	<span class="weui-media-box__desc"><font style="font-weight:bold;font-size: 14px;color: red;">#(productDetail.cashback.tag)</font>&nbsp;&nbsp;#(productDetail.cashback.backTime)</span>
	           </div>
			#end
          <p class="weui-media-box__desc">剩余:<span>#(productDetail.product.stock)</span> 销量:<span>#(productDetail.product.sales)</span></p>
        </div>
        
        #if(productDetail.fullCutInfo??) <!-- 商品满减 -->
        <div class="wy-media-box2 weui-media-box_text">
        <div class="weui-media-box_appmsg">
        <div class="weui-media-box__hd proinfo-txt-l"><span class="promotion-label-tit">满减</span></div>
        <div class="weui-media-box__bd">
        #for(fullCut : productDetail.fullCutInfo)
        	<div class="promotion-message clear">
               <i class="yhq"><span class="label-text">#(fullCut.fullCutInfo)</span></i>
               <!-- <span class="promotion-item-text">#(fullCut.fullCutInfo)</span> -->
            </div>
        #end
        #for(fullCut : productDetail.fullCutInfo)
       		#if( fullCut_index==0)
           	<div class="yhq-btn clear"><a href="javascript:void(0)">#(fullCut.fullCutTime)</a></div>
           	#end
        #end
        </div>
        </div>
        </div>
        #end
        <div class="pro-detail">
         #if(productDetail.product.introduction??)#(productDetail.product.introduction)#end
        </div>
      </div>
      <div id="tab2" class="weui-tab__bd-item">
        <!--评价-->
        #if(reviews??)
			#for(rv : reviews)
			<div class="weui-panel__bd">
	          <div class="wy-media-box weui-media-box_text">
	            <div class="weui-cell nopd weui-cell_access">
	              <div class="weui-cell__hd"><img src="#(rv.headimgurl)" alt="" style="width:20px;margin-right:5px;display:block"></div>
	              <div class="weui-cell__bd weui-cell_primary"><p>#(rv.nickname)</p></div>
	              <span class="weui-cell__time">#(rv.created)</span>
	            </div>
	            #if(rv.score == 1)
	            	<div class="comment-item-star"><span class="real-star comment-stars-width1"></span></div>
	            #end	
	            #if(rv.score == 2)
	            	<div class="comment-item-star"><span class="real-star comment-stars-width3"></span></div>
	            #end	
	            #if(rv.score == 3)
	            	<div class="comment-item-star"><span class="real-star comment-stars-width5"></span></div>
	            #end
	            <p class="weui-media-box__desc">#(rv.content)</p>
	            #if( rv.file??)
	            <ul class="weui-uploader__files clear mg-com-img">
	                #for(f: rv.file)
	                <li class="weui-uploader__file" style="background-image:url(#(f.fileName))"></li>
	                #end
	            </ul>
	            #end
	          </div>
	        </div>
			#end
			<a id="reviewsId" href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link list-more">
	            <div class="weui-cell__bd">查看更多</div>
	            <span class="weui-cell__ft"></span>
	        </a>
		#else
		<div class="weui-media-text" style="text-align: center;">
			没有评价
		</div>	
		#end
      </div>
    </div>
  </div>  
</div>
<span id="tophovertree" title="返回顶部"></span>
<!--底部导航-->
<div class="foot-black"></div>
<div class="weui-tabbar wy-foot-menu">
  <!-- <a href="javascript:void(0);" class="promotion-foot-menu-items">
    <div class="weui-tabbar__icon promotion-foot-menu-kefu"></div>
    <p class="weui-tabbar__label">客服</p>
  </a> -->
  <a href="javascript:void(0);" id='show-toast' class="promotion-foot-menu-items">
    <div class="weui-tabbar__icon promotion-foot-menu-collection"></div>
    <p class="weui-tabbar__label">收藏</p>
  </a>
  <a href="#(webctx)/cart" class="promotion-foot-menu-items">
  	#if(cartCount??)
		<span class="weui-badge" style="position: absolute;top: -.4em;right: 1em;">#(cartCount)</span>
  	#end
    <div class="weui-tabbar__icon promotion-foot-menu-cart"></div>
    <p class="weui-tabbar__label">购物车</p>
  </a>
  <a href="javascript:void(0);" class="weui-tabbar__item yellow-color open-popup add-shopping-cart">
    <p class="promotion-foot-menu-label">加入购物车</p>
  </a>
  <a href="javascript:void(0);" class="weui-tabbar__item red-color open-popup purchase">
    <p class="promotion-foot-menu-label">立即购买</p>
  </a>
</div>
<!-- 弹出浮层 -->
<div id="half" class="weui-popup__container weui-popup-overlay popup-bottom" style="z-index: 1000">
      <div class="weui-popup__overlay"></div>
      <div class="weui-popup__modal">
        <div class="content">
	        <div class="weui-panel weui-panel_access">
	        <!-- 新样式-->	
			 <div class="sku-layout-title name-card sku-name-card">
			        <div class="thumb">
			        <img class="js-goods-thumb goods-thumb" src="#(img_domain)#(productDetail.product.image)" alt="">
			        </div>
					<div class="detail goods-base-info">
					    <p class="title c-black ellipsis">#(productDetail.product.name)</p>
					      <div class="goods-price">
					         <div class="current-price pull-left c-black">
					            <i class="js-goods-price price font-size-16 vertical-middle c-orange">
					            #if( productDetail.promotionInfo??)
					            <b class="sys_item_promprice">#(productDetail.promotionInfo.promotionPrice)</b>
					            <s class="sys_item_price" style="font-size: 9px;color: gray;">#(productDetail.product.price)</s>
					            #else
					            <b class="sys_item_price">#(productDetail.product.price)</b>
					            #end
					            </i>
					         <span class="price-name pull-left font-size-16 c-orange" style="font-size: 12px;">#if( productDetail.product.stock??)剩余:<b class="sys_item_stock">#(productDetail.product.stock)</b>#end</span>
					        </div>
					    </div>
					</div>
					<div class="js-cancel sku-cancel">
					    <a href="javascript:void(0);" class="close-popup"><i class="weui-icon-cancel"></i></a>
					</div>
			  </div>
			</div>
        </div>
        <div class="content-padded weui-panel__bd goods-details items">
				#if(productDetail.specifications??)
					#for(sf : productDetail.specifications)
					<div class="weui-form-preview__item">
						<div class="weui-form-preview__label weui-media-box__hd" data-id="#(sf.specification.id)">
							<font size="2">#(sf.specification.name)：</font>
						</div>
						<br/>
						<ul class="weui-form-preview__value app-image-list">
							#for(sfv : sf.specificationValues)
								<li class="goods-style gs_#(sf.specification.id)" data-sf-id="#(sf.specification.id)" data-id="#(sfv.id)"><span>#(sfv.name)</span></li>
							#end					
						</ul>
					</div>	
					#end
				#end
				#if(!productDetail.product.stock??)
				<div class="weui-media-box weui-media-box_appmsg">
					<div class="weui-panel__bd">
						<font size="2">已售罄</font>
					</div>
				</div>
				#else
					<div class="weui-form-preview__item">
						<div class="weui-form-preview__label weui-media-box__hd">
							<font size="2">购买数量:</font>
						</div>
						<div class="weui-form-preview__value  count">
							<a id="minus-count" href="javascript:void(0);">-</a>
							<input id="number" type="tel" maxlength="6" value="1"/>
							<a id="add-count" href="javascript:void(0);">+</a>
						</div>
					</div>
				#end
		</div>
	    <div class="content-padded" style="padding-bottom: 10px;">
	    	<p class="weui_btn_area">
	      		<a href="javascript:void(0)" class="weui-btn weui-btn_primary d_confirm_btn">确定</a>
	    	</p>
	  	</div>
	</div>
</div>

<!--手机端script需要加载后方-->
#end
<script>
$(".swiper-zhutu").swiper({
    loop: true,
	paginationType:'fraction',
    autoplay:5000
});
$(document).on("click", "#show-toast", function() {
	//加入收藏
	$.post("#(webctx)/buyerProd/add", 
			 {productId: '#(productDetail.product.id)'}, 
			 function(resp){
				if(resp.code != 200){
					showMsg(resp.msg);
				}else{
					showMsg("收藏成功", function(){
						$.closePopup();
						return false;
			});
		}
	});
})
$(document).on("open", ".weui-popup-modal", function() {
  console.log("open popup");
}).on("close", ".weui-popup-modal", function() {
  console.log("close popup");
});
</script>
<script>
function initTopHoverTree(hvtid, times, right, bottom) {
	$("#" + hvtid).css("right", right).css("bottmo", bottom);
	$("#" + hvtid).on("click", function () { goTopHovetree(times); })
	$(window).scroll(function () {
		if ($(window).scrollTop() > 268) {
			$("#" + hvtid).fadeIn(100);
		}
		else {
			$("#" + hvtid).fadeOut(100);
		}
	})
}
//返回顶部动画
//goTop(500);//500ms内滚回顶部
function goTopHovetree(times) {
if (!!!times) {
	$(window).scrollTop(0);
	return;
}
var sh = $('body').scrollTop();//移动总距离
var inter = 13.333;//ms,每次移动间隔时间
var forCount = Math.ceil(times / inter);//移动次数
var stepL = Math.ceil(sh / forCount);//移动步长
var timeId = null;
function aniHovertree() {
!!timeId && clearTimeout(timeId);
timeId = null;
//console.log($('body').scrollTop());
if ($('body').scrollTop() <= 0 || forCount <= 0) {//移动端判断次数好些，因为移动端的scroll事件触发不频繁，有可能检测不到有<=0的情况
$('body').scrollTop(0);
return;
}
forCount--;
sh -= stepL;
$('body').scrollTop(sh);
timeId = setTimeout(function () { aniHovertree(); }, inter);
}
aniHovertree();
}

$(function (){initTopHoverTree("tophov"+"ertree",30,10,10); })

var sys_item;
var productPrice="#(productDetail.product.price)";
var productStock="#(productDetail.product.stock)";
var price='';
var promPrice="";//折扣价
var stock='';
//ajax请求价格、库存
function getPrice(){
	 $.ajax({
			type: "post",
			url: "#(webctx)/product/stocks",
			data: {productId:#(productDetail.product.id)},
			async: true,
			success: function(resp){
				if(resp.code!=200){
					$.alert(resp.msg);
					return;
				}
				sys_item=resp.data;
			}
	});
}
function getAttrPrice(){
	var defaultstats=true;
	 var _val='';
	$("ul.app-image-list .goods-style").each(function(){
		 var i=$(this);
         var v=i.attr("data-attrval");
         if(!v){
             defaultstats=false;
         }else{
             _val+=_val!=""?",":"";
             _val+=v;
         }
	});
	if($("ul.app-image-list .goods-style").length==1){
		 defaultstats=false;
	}
	price=productPrice;
	stock=productStock;
	if(!defaultstats){
		$.each(sys_item, function(key,item){
			if(key == _val){
				price=item.price;
				stock=item.stock;
				if(item.promPrice !=null && item.promPrice !="")
					promPrice = item.promPrice;
				return;
			}
		});
	}
	$(".sys_item_price").text(price);
	$(".sys_item_stock").text(stock);
	if(promPrice != null  && promPrice !=""){
		$(".sys_item_promprice").text(promPrice);
	}
}
$().ready(function() {
	getPrice();
	#if(productDetail.product.product_type == 4)
		<!--禁用微信分享按钮-->
		function onBridgeReady() {
			// 通过下面这个API隐藏右上角按钮
		    WeixinJSBridge.call('hideOptionMenu');
		}
	
		if (typeof WeixinJSBridge == "undefined") {
		    if (document.addEventListener) {
		        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
		    } else if (document.attachEvent) {
		        document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
		        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
		    }
		} else {
		    onBridgeReady();
		}
	#end
});
var flag = 1;//加入购物车

$(function() {
	$(".weui-navbar__item").click(function(){
		$(".weui-navbar__item").each(function(){
			$(this).removeClass("weui_bar__item_on");
		});
		var me = $(this);
		me.addClass("weui_bar__item_on");
		if(me.attr("id") == "a_detail"){
			$("#div_detail").show();
			$("#div_review").hide();
		}else {
			$("#div_detail").hide();
			$("#div_review").show();
		}
	});
	
	//全选
	$(".swiper-container").swiper({
		speed: 300,
		loop: true,
		autoplay: 3000
	});

	//控制数量只能输入数字
	$("#number").keypress(function(event) {  
      	var keyCode = event.which;  
       	if ((keyCode >= 48 && keyCode <=57) || keyCode == 8)//8是删除键  
       		return true;  
       	else  
       		return false;  
	  }).focus(function() {  
	      	this.style.imeMode='disabled';  
	}); 
	
	//判断输入的值是否大于存库
	$("#number").blur(function(){
		var count = parseInt($(".sys_item_stock").text());
		var nCount = parseInt($("#number").val());
		if(count != null && nCount !=null && count < nCount)
			$("#number").val(count);
	})
	
	//计算数量
	var number = $("#number");
	//数量加一
	$("#add-count").click(function(){
		var count = parseInt($(".sys_item_stock").text());
		number.val(parseInt(number.val())+1 > count ? count : parseInt(number.val())+1);
	});
	//数量减一
	$("#minus-count").click(function(){
		number.val(parseInt(number.val()) > 1 ? parseInt(number.val())-1 : 1);
	});
	
/* 	//判断手机输入是否为数字
	number.bind("input propertychange",function(){
		if(isNaN($(this).val())){
			$(this).val(1);
		}
	}); */
	//款式选择效果
	$("ul.app-image-list .goods-style").click(function(){
		var sfid = $(this).attr("data-sf-id");
		$("ul.app-image-list .goods-style").each(function(){
			if(sfid == $(this).attr("data-sf-id")){
				$(this).removeClass("active");	
				$(this).removeAttr("data-attrval");
			}
		});
		if($(this).hasClass("active")){
			$(this).removeClass("active");
			$(this).removeAttr("data-attrval");
		}else{
			$(this).addClass("active");
			$(this).attr("data-attrval",$(this).attr("data-id"));
		}
		
		getAttrPrice();
	});
	//加入购物车
	$(".add-shopping-cart").click(function(){
		flag=1;
		//弹出款式选择框
		$("#half").popup();
	});
	//立即购买
	$(".purchase").click(function(){
		flag=0;
		$("#half").popup();
	});
	$(".d_confirm_btn").click(function(){
		#for(x : productDetail.specifications)
		var speciLen = #(for.size);
		#else
		var speciLen = 0;
		#end
		var speciStr = "";
		if(speciLen > 0){
			var specificationArray = new Array();
			//获取规格数据
			$(".items .goods-style").each(function(){
				if($(this).hasClass("active")){
					var entity = new Object();
					entity.sfId = $(this).attr("data-sf-id");
					entity.spvId = $(this).attr("data-id");
					specificationArray.push(entity);
				}
			});
			if(specificationArray.length <=0){
				showMsg("请选择商品规格");
				return;
			}
			if(specificationArray.length != speciLen){
				showMsg("请选择完整规格");
				return;
			}
			speciStr = JSON.stringify(specificationArray);
		}
		//获取商品数量
		var quantity = $("#number").val();
		var count = $(".sys_item_stock").text();
		if(quantity == null || quantity<=0 || quantity > count){
			showMsg("商品数量必须大于0小于等于"+count);
			return;
		}
		
		
		if(flag == 1){
			//加入购物车
			$.post("#(webctx)/cart/add", {productId: '#(productDetail.product.id)', quantity:quantity, speci:speciStr}, function(resp){
				if(resp.code != 200){
					showMsg(resp.msg);
				}else{
					showMsg("加入购物车成功", function(){
						$.closePopup();
						getCount();
						return false;
					});
				}
			});
		}else{
			//立即购买
			var itemsArray = new Array();
			var entity = new Object();
			entity.productId = #(productDetail.product.id);
			entity.pcount = $("#number").val();
			entity.speci = speciStr;				
			itemsArray.push(entity);
			location.href = "#(webctx)/pay/balance?items="+JSON.stringify(itemsArray);
		}
	});
});

$("#gzAuthUser").click(function(){
	$("#full_gongzhonghao").popup();
});
$("#tgProduct").click(function(){
	$("#full_product").popup();
});
function getAllImg() {
    var aa = [];
    var i = 0;
    var src = [];
    aa = $("img");
    for (i = 0; i < aa.length; i++) {
    	if(aa[i].id !="_cart"){
            var imgsrc = aa[i].src;
            src[i] = imgsrc;  //把所有的src存到数组里    		
    	}
    }
    return src;
}
$("img").click(function(){
	if($(this).attr("id") != "_cart"){
		var imgsrc = $(this).attr('src');
	    wx.previewImage({
	        current: imgsrc, // 当前显示图片的http链接
	        urls: getAllImg() // 需要预览的图片http链接列表
	    });
	}
});

//加入购物车后回显购物车数量
function getCount(){
	$.post("#(webctx)/cart/getCount", function(resp){
		if(resp.code != 200){
			showMsg(resp.msg);
		}else{
				$(".weui-badge").text(resp.data);
		}
	});	
}

//页码数
var pageNo = 1;

//查看更多评论
$(".list-more").click(function(){
	
	$.post("#(webctx)/product/getMostReviews", 
			 {productId: '#(productDetail.product.id)',pageNo:(++pageNo)}, 
			 function(resp){
				if(resp.code != 200){
					showMsg(resp.msg);
				}else{
 					var reHtml="";
 					var result = resp.data
					for(var i = 0; i < result.length; i++){
						var html = "<div class='weui-panel__bd'>"
											+"<div class='wy-media-box weui-media-box_text'>"
												+"<div class='weui-cell nopd weui-cell_access'>"
													+"<div class='weui-cell__hd'><img src='"+result[i].headimgurl+"' alt='' style='width:20px;margin-right:5px;display:block'></div>"
													+"<div class='weui-cell__bd weui-cell_primary'><p>"+result[i].nickname+"</p></div>"
													+"<span class='weui-cell__time'>"+result[i].created+"</span>"
												+" </div>";
						if(result[i].score ==1){
							html+=" <div class='comment-item-star'><span class='real-star comment-stars-width1'></span></div>";
						}						
						if(result[i].score ==2){
							html+=" <div class='comment-item-star'><span class='real-star comment-stars-width3'></span></div>";
						}						
						if(result[i].score ==3){
							html+=" <div class='comment-item-star'><span class='real-star comment-stars-width5'></span></div>";
						}						
						html+="<p class='weui-media-box__desc'>"+result[i].content+"</p>";
						if(result[i].lile != null){
							html+="<ul class='weui-uploader__files clear mg-com-img'>";
							for(var j;j < result[i].lile.length-1;j++){
								var liles = result[i].lile;
								html+="<li class='weui-uploader__file' style='background-image:url("+liles[j]+")'></li>";
							}
							html+="</ul>";
						}								
						html+=" </div></div>";		
						reHtml += html;
					}
					$("#reviewsId").before(reHtml);
				}
			});
});
	
</script>